<script setup lang="ts" name="B45ShallowRefAndShallowReactive">
import { shallowRef, shallowReactive } from "vue";

const sum = shallowRef(0);
const person = shallowRef({ name: "张三", age: 18 });
const car = shallowReactive({
  brand: "别摸我",
  options: {
    price: 38,
    color: "红",
    engine: "V8",
  },
});

const changeSum = () => {
  sum.value += 1;
};
const changeName = () => {
  person.value.name += "~";
};
const changeAge = () => {
  person.value.age += 1;
};
const changePerson = () => {
  person.value = { name: "李四", age: 99 };
};
const changeBrand = () => {
  car.brand += "~";
};
const changeEngine = () => {
  car.options.engine += "@";
};

const changeColor = () => {
  car.options.color += "*";
};
const changePrice = () => {
  car.options.price += 1;
};
const changeCar = () => {
  Object.assign(car, {
    brand: "比一定",
    options: {
      price: 8,
      color: "白",
      engine: "E5",
    },
  });
};
</script>

<template>
  <div class="my-6 container mx-auto max-w-3xl bg-white shadow border p-6 rounded flex flex-col gap-y-3">
    <div>当前求和：{{ sum }}</div>
    <div>姓名：{{ person.name }}，年龄：{{ person.age }}</div>
    <div>
      一辆价值{{ car.options.price }}个W的、{{ car.options.color }}色的、{{
        car.options.engine
      }}引擎的{{ car.brand }}车
    </div>
    <ul class="flex gap-x-2">
      <li>
        <button class="px-1 py-0.5 bg-gray-50 border shadow" @click="changeSum">
          sum+1
        </button>
      </li>
      <li>
        <button class="px-1 py-0.5 bg-gray-50 border shadow" @click="changeName">
          改姓名
        </button>
      </li>
      <li>
        <button class="px-1 py-0.5 bg-gray-50 border shadow" @click="changeAge">
          改年龄
        </button>
      </li>
      <li>
        <button class="px-1 py-0.5 bg-gray-50 border shadow" @click="changePerson">
          改整个人
        </button>
      </li>
    </ul>
    <ul class="flex gap-x-2">
      <li>
        <button class="px-1 py-0.5 bg-gray-50 border shadow" @click="changeBrand">
          改车的品牌
        </button>
      </li>
      <li>
        <button class="px-1 py-0.5 bg-gray-50 border shadow" @click="changeColor">
          改车的颜色
        </button>
      </li>
      <li>
        <button class="px-1 py-0.5 bg-gray-50 border shadow" @click="changePrice">
          改车的价格
        </button>
      </li>
      <li>
        <button class="px-1 py-0.5 bg-gray-50 border shadow" @click="changeEngine">
          改车的引擎
        </button>
      </li>
      <li>
        <button class="px-1 py-0.5 bg-gray-50 border shadow" @click="changeCar">
          改整个车
        </button>
      </li>
    </ul>
  </div>
</template>
